<template>
    <div class="slider">
      <div class="slider-content">
        <ul class="slider-img" ref="sliderImg">
          <li  v-for="(item,index) in banner" :key="index">
            <img :src="item.picurl" alt="">
          </li>
        </ul>
      </div>
      <span class="iconfont icon-jiantou4" @click="sliderTo(true)"></span>
      <span class="iconfont icon-jiantou-you" @click="sliderTo(false)"></span>
      <ul class="slider-dot">
        <li :class="{select:index===dotIndex}" v-for="(item,index) in banner" @click="chooseDot(index)"></li>
      </ul>
    </div>

</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "Slider",
        data(){
          return{
            dotIndex:0,
            banner:[],
            sliderX:0,
          }
        },
        methods:{
          chooseDot(index){
            // console.log(this.dotIndex - index);
            this.sliderX+=(this.dotIndex-index)*900;
            this.$refs.sliderImg.style.transform=`translateX(${this.sliderX}px)`
            this.$refs.sliderImg.style.transition=`all 1s`
            // console.log(this.$refs.sliderImg.style.transform);
            this.dotIndex=index;
          },
          sliderTo(bool){
              if(bool){//bool为真，即往左滑动
                this.sliderX+=900;
                this.dotIndex--;
                if(this.sliderX>0){
                  this.sliderX=-900*(this.$refs.sliderImg.children.length-1);
                  this.dotIndex=this.$refs.sliderImg.children.length-1
                  this.$refs.sliderImg.style.transition=`all 0s`
                }else{
                  this.$refs.sliderImg.style.transition=`all 1s`
                }
              }else{
                this.sliderX+=-900;
                this.dotIndex++;
                if(this.sliderX<-900*(this.$refs.sliderImg.children.length-1)){
                  this.sliderX=0;
                  this.dotIndex=0;
                  this.$refs.sliderImg.style.transition=`all 0s`

                }else{
                  this.$refs.sliderImg.style.transition=`all 1s`
                }
              }
            this.$refs.sliderImg.style.transform=`translateX(${this.sliderX}px)`
            // console.log(this.sliderX);
          },
          sliderSetTime(){
            this.time=setInterval(()=>{
              this.sliderX+=-900;
              this.dotIndex++;
              if(this.$refs.sliderImg.children){
                if(this.sliderX<-900*(this.$refs.sliderImg.children.length-1)){
                  this.sliderX=0;
                  this.dotIndex=0;
                  this.$refs.sliderImg.style.transition=`all 0s`
                }else{
                  this.$refs.sliderImg.style.transition=`all 1s`
                }
              }
              this.$refs.sliderImg.style.transform=`translateX(${this.sliderX}px)`
            },3000)
          }
        },
        mounted(){
          this.sliderSetTime();
        },
        computed:{
          ...mapState(['digitalAlbumList']),
        },
        watch:{
          digitalAlbumList(value){
            this.banner=value.banner;
          },
        },
        beforeDestroy(){
          clearInterval(this.time); //点击其他路由，需要清除定时器
        }

    }
</script>

<style scoped lang="less">
.slider{
  background: linear-gradient(to bottom ,#f2f2f2 ,#fafafa);
  width: 100%;
  padding: 40px 0px;
  .slider-content{
    width: 900px;
    overflow: hidden;
    position: relative;
    margin:0 auto;
    .slider-img{
      display: flex;
      flex-direction: row;
      >li{
        >img{
          width: 900px;
        }
      }
    }
  }
  &:hover{
    >span{
      &.iconfont{
        opacity: 1;
      }
    }
  }
  >span{
    &.iconfont{
      display:block;
      height: 108px; /*尚未解决左右滑动的问题*/
      width: 68px;
      background: #efeeef;
      font-size: 40px;
      line-height: 108px;
      text-align: center;
      position: absolute;
      top:300px;
      opacity: 0;
      transition:all 1s;
      &.icon-jiantou4{
        left: 80px;
      }
      &.icon-jiantou-you{
        right:80px;
        &:before{
          position: relative;
          left: -40px;
          padding-left: 54px;
        }
      }
    }
  }
  .slider-dot{
    text-align: center;
    margin-top: 10px;
    width: 100%;
    >li{
      width: 10px;
      height: 10px;
      background: #ccc;
      border-radius: 50%;
      display: inline-block;
      margin-right: 10px;
      &.select{
        background: #31c27c;
      }
    }
  }
}
</style>
